<template>
  <div>
    <div class="top">
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        show-action
        background="#4fc08d"
        placeholder="请输入小区或地址"
      >
        <template #action>
          <!-- 地图图标 -->
          <div @click="onSearch" class="right">
            <van-icon name="map-marked" color="#fff" size="0.53rem" />
          </div>
        </template>
        <template #lable>
          <div class="right">
            <van-icon name="map-marked" color="#fff" size="0.53rem" />
          </div>
        </template>
        <template #left>
          <div  class="left">
            <van-icon name="arrow-left" color="#fff" size="0.63rem" />
          </div>
          <div @click="onSearchFn" class="left1">
            <div>{{ label }}</div>
          </div>
        </template>
      </van-search>
      <!-- 下拉列表 -->
      <van-sticky :offset-top="0" close-on-click-outside>
        <van-dropdown-menu active-color="#21b97a">
          <!-- 区域模块 -->
          <van-dropdown-item v-model="value1" title="区域" ref="getarea">
            <van-picker
              :columns="cityList"
              :loading="loading"
              value-key="label"
              ref="pickerAret"
              @confirm="onareaFn"
            >
              <template #columns-bottom>
                <van-button size="small" @click="pickerFn">取消</van-button>
                <van-button size="small" type="danger" @click="yesFn"
                  >确定</van-button
                >
              </template>
            </van-picker>
          </van-dropdown-item>
          <!-- 方式模块 -->
          <van-dropdown-item v-model="value1" title="方式" ref="getarea2">
            <van-picker
              :columns="modeList"
              value-key="label"
               ref="pickerAret2"
              @confirm="onstyleFn"
            >
              <template #columns-bottom>
                <van-button size="small"  @click="pickerFn2">取消</van-button>
                <van-button size="small" type="danger" @click="yesFn2"
                  >确定</van-button
                >
              </template>
            </van-picker>
          </van-dropdown-item>
          <!-- 租金模块 -->
          <van-dropdown-item v-model="value1" title="租金" ref="getarea3">
            <van-picker
              :columns="rentList"
              value-key="label"
              toolbar-position="bottom"
              ref="pickerAret3"
              @confirm="onmoneyFn"
            >
              <template #columns-bottom>
                <van-button size="small"  @click="pickerFn3">取消</van-button>
                <van-button size="small" type="danger" @click="yesFn3"
                  >确定</van-button
                >
              </template>
            </van-picker>
          </van-dropdown-item>
          <!-- 筛选模块 -->
          <van-dropdown-item
            v-model="value1"
            title="筛选"
            ref="getarea4"
            @open="show=true"
          >
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-sticky>

      <!-- 筛选弹出层 -->
      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '80%' }"
      >
        <!-- 引入弹出层组件 -->
        <picker-4 :findList="findList" @open="openFn"></picker-4>
      </van-popup>
    </div>
    <!-- 引入房子列表 -->
    <house-list  :city="label" :houseList="houseList"></house-list>
  </div>
</template>
<script>
// 请求接口
import { conditionAPI, infoAPI, houseAPI } from '@/api'
import HouseList from './HouseList'
import Picker4 from './van/picker4.vue'
// 引入下拉菜单组件
export default {
  components: { HouseList, Picker4 },
  // 请求城市
  async created () {
    // 将当前城市存起来
    this.label = localStorage.getItem('newCity')
    console.log(this.label)
    localStorage.setItem('city', this.label)
    // 延时加载状态
    setTimeout(() => {
      this.loading = false
    }, 500)
    // 根据城市名称查询该城市信息
    const resCity = await infoAPI(this.label)
    // 地区的code
    this.cityId = resCity.data.body.value
    // 调用子集城市列表接口
    const resCity2 = await conditionAPI(this.cityId)
    // console.log(resCity2)
    // 判断城市数据结构是否一致
    resCity2.data.body.area.children.forEach((item) => {
      if (!item.children) {
        item.children = [{ label: '' }]
      } else {
        item.children.forEach((val) => {
          if (!val.children) {
            val.children = [{ label: '' }]
          }
        })
      }
    })
    // 地铁数据是否一致
    resCity2.data.body.subway.children.forEach((item) => {
      if (!item.children) {
        item.children = [{ label: '' }]
      } else {
        item.children.forEach((val) => {
          if (!val.children) {
            val.children = [{ label: '' }]
          }
        })
      }
    })
    // 城市
    this.qu = resCity2.data.body.area
    // 地铁
    this.subway = resCity2.data.body.subway
    // 区域
    this.cityList.push(this.qu)
    this.cityList.push(this.subway)
    console.log(this.cityList)
    // 方式
    this.modeList = resCity2.data.body.rentType.map((item) => item.label)
    console.log(this.modeList)
    // 租金
    this.rentList = resCity2.data.body.price.map((item) => item.label)
    // 筛选
    this.findList.push(resCity2.data.body.roomType) // 户型
    this.findList.push(resCity2.data.body.oriented) // 朝向
    this.findList.push(resCity2.data.body.floor) // 楼层
    this.findList.push(resCity2.data.body.characteristic) // 房屋亮点
    localStorage.setItem('findList', JSON.stringify(this.findList))
    // console.log(this.findList)
  },
  data () {
    return {
      value: '',
      value1: '',
      label: '', // 当前城市
      newCityCode: '', // 当前城市id值
      styles: '',
      loading: true,
      show: false,
      hortArr: [], // 热门城市
      qu: [], // 区域城市列表
      cityList: [], // 城市列表
      subway: [], // 地铁列表
      modeList: [], // 方式列表
      rentList: [], // 租金列表
      findList: [], // 筛选弹出层
      houseList: [],
      // 当前城市
      cityInfo: {
        cityId: localStorage.getItem('newCityCode') || 'AREA|88cff55c-aaa4-e2e0',
        start: 1,
        end: 100,
        area: null, // 地区
        rentType: null,
        price: null,
        // more占位
        more: '',
        // 地铁信息
        subway: null
      }
    }
  },
  methods: {
    onSearch () {
      console.log(1)
      this.$router.push({
        path: '/vueBaiduMap'
      })
    },
    onSearchFn () {
      console.log(this.label)
      this.$router.push({
        path: '/city'
      })
    },
    // 根据条件查询房屋
    async houseListApi () {
      const res = await houseAPI(this.cityInfo)
      console.log(res)
      this.houseList = res.data.body.list
      console.log(this.cityInfo)
    },
    // 子组件传值
    openFn (list) {
      this.show = false
      console.log(list)
      this.cityInfo.more = list
      // 调用接口
      this.houseListApi()
    },
    onstyleFn () {},
    // 点击完成按钮触发
    onareaFn () {
      console.log(1)
    },
    // 区域模块
    async yesFn () {
      this.$refs.getarea.toggle()
      // 获取下拉列表的值
      const [item1, item2, item3] = this.$refs.pickerAret.getValues()
      // console.log(item1, item2, item3)
      if (item1.label === '区域') {
        this.cityInfo.area = item2.label === '不限' ? null : item3.label === '不限' ? item2.value : item3.value
        this.cityInfo.subway = null
      } else {
        this.cityInfo.subway = item2.label === '不限' ? null : item3.label === '不限' ? item2.value : item3.value
        this.cityInfo.area = null
      }
      // const res = await houseAPI(this.cityInfo)
      // console.log(res)
      // this.houseList = res.data.body.list
      this.houseListApi()
    },
    // 点击取消
    pickerFn () {
      this.$refs.getarea.toggle()
    },

    // 方式模块
    yesFn2 () {
      this.$refs.getarea2.toggle()
      console.log(this.$refs.pickerAret2.getValues().join())
      const sty = this.$refs.pickerAret2.getValues().join()
      this.cityInfo.rentType = sty
      if (this.cityInfo.subway === null) this.cityInfo = { ...this.cityInfo }
      console.log(this.cityInfo)
    },
    pickerFn2 () {
      this.$refs.getarea2.toggle()
    },
    // 租金模块
    yesFn3 () {
      this.$refs.getarea3.toggle()
      console.log(this.$refs.pickerAret3.getValues().join())
      const sty = this.$refs.pickerAret3.getValues().join()
      this.cityInfo.price = sty
      if (this.cityInfo.subway === null) this.cityInfo = { ...this.cityInfo }
    },
    pickerFn3 () {
      this.$refs.getarea3.toggle()
    },
    onmoneyFn () {}
  }
}
</script>

<style lang="less" scoped>
.top {
  z-index: 1;
  width: 100%;
}
.van-cell {
  line-height: 0.6rem;
  padding: 0.18rem 0.21333rem 0.13333rem 0rem;
}
/deep/.van-search {
  padding: 0.0733rem 0.52rem;
}
.van-search__content {
  margin-left: 0rem;
}

.left {
  height: 0.9rem;
  margin-top: -0.2rem;
  margin-left: -0.3rem;
  overflow: hidden;
}
.left1 {
  background-color: #f7f8fa;
  color: #333333;
  margin-left: 0.3rem;
  margin-top: -0rem;
  width: 1.6rem;
  height: 0.91rem;
  font-size: 0.4rem;
}
.left1 div {
  margin-top: 0.16rem;
  margin-left: 0.3rem;
}
.right {
  margin-top: 0.1rem;
}
/* 按钮 */
.van-button--small {
  width: 5rem;
  height: 1.25333rem;
  padding: 0px 0.21333rem;
  font-size: 0.42rem;
}
.van-button--danger {
  background-color: #4fc08d;
  border: 0.02667rem solid #4fc08d;
}
</style>
